<template>
  <div>
    <el-breadcrumb style="margin-bottom: 10px" separator="/" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/admin/article/list">文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章审核</el-breadcrumb-item>
    </el-breadcrumb>
    <!--查询or添加-->
    <el-form v-show="showSearch" :rules="rules" :inline="true" ref="form" :model="params" label-width="68px">

      <el-form-item label="文章名称">
        <el-input style="width: 150px" size="small" v-model="params.title" placeholder="请输入文章名称" @input="queryList()"/>
      </el-form-item>
      <el-form-item label="标签名">
        <el-select style="width: 130px" size="small" v-model="params.tagId" placeholder="请选择标签">
          <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id" @input="queryList()"/>
        </el-select>
      </el-form-item>

      <el-form-item label="分类名">
        <!--        filterable clearable reserve-keyword-->
        <el-select style="width: 130px" size="small" v-model="params.categoryId" placeholder="请选择分类">
          <el-option v-for="item in categoryArr" :key="item.id" :label="item.name" :value="item.id"
                     @input="queryList()"/>
        </el-select>
      </el-form-item>

      <el-form-item label="发布状态">
        <el-select style="width: 130px" size="small" v-model="params.status"
                   placeholder="是否发布">
          <el-option v-for="(item,index) in publishList" :key="index" :label="item" :value="index"
                     @input="queryList()"/>
        </el-select>
      </el-form-item>


      <el-form-item>

        <el-button type="primary" icon="el-icon-search" size="small" @click="handleFind">查找</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>


    </el-form>

    <el-table
        :data="tableData"
        border
        style="width: 100%"
    >
      <el-table-column prop="viewPicture" label="文章封面" width="120">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.viewPicture"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="150"></el-table-column>
      <el-table-column prop="isOriginal" label="类型" width="80"></el-table-column>
      <el-table-column prop="categoryName" label="分类" width="100"></el-table-column>
      <el-table-column prop="tagName" label="标签" width="200">
        <template slot-scope="scope">
          <el-tag
              style="margin-left: 3px"
              align="center"
              type="primary"
              v-for="(item) in strSplit(scope.row.tagName)"
          >{{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" prop="isRecommended" width="80">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.isRecommended"
              @change="handleEditRecommon(scope.$index, scope.row.id, scope.row.isRecommended)"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#999">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="viewCount" label="浏览量" width="80"></el-table-column>
      <el-table-column prop="gmtCreate" label="发表时间" width="160"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button icon="el-icon-search" @click="cardPopup(scope.row)" circle></el-button>
          <el-button type="success" icon="el-icon-check" @click="handleEditRecommon(scope.row,2)" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" @click="open(scope.row,3)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>


    <template>
      <el-dialog
          title="文章详情"
          append-to-body
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          width="65%"
          @close="closeDialog('ruleForm')">
        <div>
          <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
          />
        </div>
      </el-dialog>
    </template>

    <!--分页区域-->
    <div class="pagination-container" style="float: right;margin-bottom: 1.25rem;margin-top: 1.25rem;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-size="pageSize" :page-sizes="[2,10, 20, 30]"
                     layout="total, sizes,prev, pager, next,jumper" :total="total">
      </el-pagination>
    </div>

  </div>

</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id: '',
        examineStatus: '',
      },
      dialogVisible: false,
      content:'', //文章详情
      pageNo: 1,
      pageSize: 10,
      /*表单判断条件*/
      showSearch: true,
      tags: [],
      categoryArr: [],
      /*文章列表数据*/
      tableData: [],
      params: {
        title: null,
        tagId: null,
        categoryId: null,
        status: null,
        examineStatus: 1, // 1为待审核状态
        offset: 0,
        count: 0
      },
      roleStatus: '待审核',
      publishList: [ '草稿箱', '发布'],
      /*当前也数量*/
      total: 0,
      /*文章查询总数*/
      count: 0,
      tagName: '',
      inputValue: '',
      rules: {
        'title': [{required: true, message: '必填字段', trigger: 'blur'}],
      },
    }
  },
  methods: {
    cardPopup(row) {
      alert(row.content)
      this.content = row.content;
      this.dialogVisible = true;              // 打开弹窗
    },

    // 审核通过
    handleEditRecommon: function (row, examineStatus) {
      let data = {
        articleId: row.id,
        userId: row.userId,
        message:'审核通过',
        status:1,
        examineStatus: examineStatus
      }
      let url = 'http://localhost:9090/system/articles/createExamineStatus'
      this.axios.post(url, data).then((response) => {
        if (response.data.code) {
          this.$message({
            type: 'success',
            message: '审核通过'
          });
          this.queryList()
        }
      })
    },

    // 审核不通过
    open(row, examineStatus) {
      this.$prompt('请输入审核失败原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {

        let url = 'http://localhost:9090/system/articles/createExamineStatus'
        let data={
          articleId: row.id,
          userId: row.userId,
          message: value,
          status:1,
          examineStatus: examineStatus
        }

        this.axios.post(url,data).then((response)=>{
          if (response.data.code==200){
            this.$message({
              type: 'success',
              message: '操作成功'
            });
            this.queryList()
          }else {
            this.$message({
              type: 'error',
              message: response.data.message
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    /*划分标签*/
    strSplit: function (item) {
      if (item == null || item == "") {
        return
      }
      return item.split(",")
    },
    queryList: function () {
      /*文章列表*/
      let url = 'http://localhost:9090/system/articles/adminSelectFind'
      console.log("url=" + url)
      this.params.offset = (this.pageNo - 1) * this.pageSize
      this.params.count = this.pageSize

      this.axios.post(url, this.params).then((response) => {
        this.tableData = response.data.data;
        console.log('this.tableData=' + this.tableData)
      })
    },
    /*分页查询，页码变化*/
    handleSizeChange: function (val) {
      this.pageSize = val
      this.queryList();
    },
    handleCurrentChange: function (val) {
      //当前页码
      this.pageNo = val
      this.queryList();
    },

    /**/
    handleFind() {
      this.queryList();
    },
    resetQuery: function () {
      this.params.title = null,
          this.params.tagId = null,
          this.params.categoryId = null,
          this.params.status = null,
          this.queryList()
    },
    closeDialog(ruleForm) {
      if (this.$refs[ruleForm] !== undefined) {
        this.$refs[ruleForm].resetFields();
      }
    },
  },


  created: function () {
    //请求所有分类数据
    let url = 'http://localhost:9090/system/category'
    console.log("url=" + url)
    this.axios.get(url).then((response) => {
      this.categoryArr = response.data.data;
      console.log(this.params.categoryArr)
    })


    //请求所有标签数据
    url = 'http://localhost:9090/tags/select'
    console.log("url=" + url)
    this.axios.get(url).then((response) => {
      this.tags = response.data.data;
    })

    url = 'http://localhost:9090/system/articles/selectCount';
    this.axios.post(url, this.params).then((response) => {
      this.total = response.data.data;

    })
    /*文章列表*/
    this.queryList();
  },
}
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>